<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入css统一化文件-->
    <link rel="stylesheet" href="./css/base.css" />
    <!--引入共同的样式文件-->
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/detail.css" />
</head>
<body>
    <!--侧边栏部分-->
    <div class="toolbar">
      <div class="content"></div>
      <div class="but"></div>
      <div class="toolist">
        <div class="pull">
          <i class="tab-ico vip"></i>
          <em class="tab-text">商品会员</em>
        </div>
        <div class="pull">
          <i class="tab-ico cart"></i>
          <em class="tab-text">购物车</em>
        </div>
        <div class="pull">
          <i class="tab-ico follow"></i>
          <em class="tab-text">我的关注</em>
        </div>
        <div class="pull">
          <i class="tab-ico history"></i>
          <em class="tab-text">我的足迹</em>
        </div>
        <div class="pull">
          <i class="tab-ico message"></i>
          <em class="tab-text">我的消息</em>
        </div>
        <div class="pull">
          <i class="tab-ico jimi"></i>
          <em class="tab-text">咨询</em>
        </div>
      </div>
      <div class="back pull">
        <i class="tab-ico top"></i>
        <em class="tab-text">顶部</em>
      </div>
    </div>
    <!--顶部快捷导航栏开始-->
    <section class="shortcut">
        <div class="heart">
          <!--快捷导航左侧部分-->
          <div class="fleft">
            <ul>
              <li>你好！</li>
              <li>
                <a href="#">请登录</a>
                <a href="#" class="style_red">免费注册</a>
              </li>
            </ul>
          </div>
          <!--快捷导航右侧部分-->
          <div class="fright">
            <ul class="line">
              <li><a href="#">我的订单</a></li>
              <li></li>
              <li><a href="#">我的购物车</a></li>
              <li></li>
              <li><a href="#">我的服务</a><i class="iconfont">&#xe8d7;</i></li>
              <li></li>
              <li><a href="#">我的会员</a></li>
              <li></li>
              <li><a href="#">企业采购</a></li>
              <li></li>
              <li><a href="#">客户服务</a></li>
              <li></li>
              <li><a href="#">合作招商</a></li>
              <li></li>
              <li><a href="#">商家后台</a><i class="iconfont">&#xe8d7;</i></li>
            </ul>
          </div>
        </div>
    </section>
    <!--顶部快捷导航栏结束-->
      <!--头部模块开始-->
      <header class="header-bar heart">
        <!--logo模块开始-->
        <div class="logo">
          <h1>
            <a href="index.html" title="shopping">shoping首页</a>
          </h1>
        </div>
        <!--logo模块结束-->
        <!--搜索模块开始-->
        <div class="search">
          <input type="search" name="" id="" placeholder="请输入搜索内容" />
          <button>搜索</button>
        </div>
        <!--搜索模块结束-->
        <!--热点词模块开始-->
        <div class="hotwords">
          <a href="#" class="style_red">全民种植季</a>
          <a href="#">京东京造</a>
          <a href="#">邮币节 </a>
          <a href="#">Watch</a>
          <a href="#">新品上市</a>
          <a href="#">Neo6上市</a>
          <a href="#">低至5折 </a>
          <a href="#">智能手表</a>
        </div>
        <!--热点词模块结束-->
        <!--购物车模块开始-->
        <div class="shopcar">
          <i class="iconfont">&#xe61b;</i>
          <i class="count">0</i>
          <a href="#">我的购物车</a>
          <span class="iconfont">&#xe8d7;</span>
        </div>
        <!--购物车模块结束-->
      </header>
      <!--头部模块结束-->
      <!--导航模块开始-->
      <nav class="nav">
        <div class="heart">
          <!--全部分类菜单模块开始-->
          <div class="dropdown">
            <div class="dt">全部商品分类</div>
            <div class="dd">
              <ul>
                <li><a href="#">家用电器</a></li>
                <li>
                  <a href="#">手机</a> / <a href="#">运营商</a> /
                  <a href="#">数码</a>
                </li>
                <li><a href="#">电脑</a> / <a href="#">办公</a></li>
                <li>
                  <a href="#">家居</a> / <a href="#">家具</a> /
                  <a href="#">厨具</a>
                </li>
                <li>
                  <a href="#">男装</a> / <a href="#">女装</a> / 
                  <a href="#">童装</a></a>
                </li>
                <li>
                  <a href="#">女鞋</a> / <a href="#">箱包</a> / 
                  <a href="#">钟表</a> / <a href="#">珠宝</a>
                </li>
                <li>
                  <a href="#"> 男鞋</a> / <a href="#">运动</a> / 
                  <a href="#">户外</a>
                </li>
                <li>
                  <a href="#">房产</a>
                </li>
                <li>
                  <a href="#">食品</a> / <a href="#">酒类</a> 
                </li>
                <li>
                  <a href="#">艺术</a> / <a href="#">礼品鲜花</a>
                </li>
                <li>
                  <a href="#">医药保健</a>
                </li>
                <li>
                  <a href="#">图书</a> / <a href="#">文娱</a> / 
                   <a href="#">教育</a> / <a href="#">电子书</a>
                </li>
                <li>
                  <a href="#">机票</a> / <a href="#">酒店</a>
                </li>
                <li>
                  <a href="#">理财</a> / <a href="#">众筹</a>
                </li>
                <li>
                  <a href="#">安装</a> / <a href="#">维修</a> / 
                  <a href="#">搬家</a>
                </li>
              </ul>
            </div>
          </div>
          <!--全部分类菜单模块结束-->
          <!--导航各个项目开始-->
          <div class="navitems">
            <ul>
              <li><a href="#">限时秒杀</a></li>
              <li><a href="#">优惠券</a></li>
              <li><a href="#">服装城</a></li>
              <li><a href="#">品牌闪购</a></li>
              <li><a href="#">拍卖</a></li>
              <li><a href="#">京东家电</a></li>
              <li><a href="#">京东超市</a></li>
              <li><a href="#">全球购</a></li>
            </ul>
          </div>
          <!--导航各个项目结束-->
        </div>
      </nav>
      <!--导航模块结束-->


      <!-- 主要内容区域 -->
    <section class="heart con">
        <!-- 导航路径区域 -->
        <div class="nav-detail">
            <div class="nav-row">
                <a href="">手机、数码、通讯</a>
                <a href="">手机</a>
                <a href="">iPhone苹果</a>
                <a href="">三星系列</a>
            </div>
            <div class="nav-row">
                <a href="">手机、数码、通讯</a>
                <a href="">手机</a>
                <a href="">iPhone苹果</a>
                <a href="">三星系列</a>
            </div>
        </div>
        <!--商品展示主要区域-->
        <div class="main-con clearfix">
            <!--图片放大区域-->
            <div class="preview">
                <div class="pic">
                    <img src="./upload/good1.png" alt="图片加载失败">
                </div>
                <!--下方的缩略图-->
                <div class="spcScroll">
                    <!--左按钮-->
                    <a class="prev"><span class="iconfont">&#xe8d0;</span></a>
                    <!-- 中间可滑动区域 -->
                    <div class="items">
                        <div class="itemcon"><img src="./upload/good1.png" alt="图片加载失败"></div>
                        <div class="itemcon"><img src="./upload/good1.png" alt="图片加载失败"></div>
                        <div class="itemcon"><img src="./upload/good1.png" alt="图片加载失败"></div>
                        <div class="itemcon"><img src="./upload/good1.png" alt="图片加载失败"></div>
                        <div class="itemcon"><img src="./upload/good1.png" alt="图片加载失败"></div>
                    </div>
                    <!--右按钮-->
                    <a class="next"><span class="iconfont">&#xe8d2;</span></a>
                </div>
            </div>
            <!-- 右侧选择区商品细节 -->
            <div class="details">
              <div class="goodsDetails">
                <h3 class="InfoName">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                <p class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
              </div>
              <div class="price">
                <div class="price-top clearfix">
                  <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                  <div class="price-in">
                    <i>￥</i><em>5999</em><span>降价通知</span>
                  </div>
                  <div class="remark">
                    <i>累计评价</i>
                    <em>65545</em>
                  </div>
                </div>
                <div class="price-bottom">
                  <div class="title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                  <div class="full-with">
                    <i>加价购</i>
                    <em>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                  </div>
                </div>
              </div>
              <div class="support">
                <div class="supportArea">
                  <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                  <div class="fixWidth">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
                </div>
                <div class="supportArea">
                  <div class="title">配 送 至</div>
                  <div class="fixWidth">广东省 深圳市 宝安区</div>
                </div>
              </div>
              <!--选择区域-->
              <div class="choose">
                <div class="chooseArea">
                  <div class="choosed clearfix">
                    <div class="item">官方标配<a href="">×</a></div>
                    <div class="item">金色<a href="">×</a></div>
                  </div>
                  <dl>
                    <dt class="title">选择颜色</dt>
                    <dd class="active">金色</dd>
                    <dd>银色</dd>
                    <dd>黑色</dd>
                  </dl>
                  <dl>
                    <dt class="title">内存容量</dt>
                    <dd>16G</dd>
                    <dd>64G</dd>
                    <dd>128G</dd>
                    <dd>256G</dd>
                  </dl>
                  <dl>
                    <dt class="title">选择版本</dt>
                    <dd>国行版</dd>
                    <dd>海外版</dd>
                  </dl>
                  <dl>
                    <dt class="title">购买方式</dt>
                    <dd>官方标配</dd>
                    <dd>电信优惠版</dd>
                    <dd>移动优惠版</dd>
                  </dl>
                </div>
                <div class="cart clearfix">
                  <div class="cont">
                    <input value="1" autocomplete="off"/>
                    <a class="plus">+</a>
                    <a class="min">-</a>
                  </div>
                  <div class="add">
                    <a>加入购物车</a>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- 内容详情页 -->
        <div class="productDetail clearfix">
          <aside class="left">
            <div class="tabWraped">
              <h4 class="active">相关分类</h4>
              <h4 class="">推荐品牌</h4>
            </div>
            <div class="tabContent">
              <div class="tab-in active">
                <ul class="partList clearfix">
                  <li>手机</li>
                  <li>手机壳</li>
                  <li>手机配件</li>
                  <li>钢化膜</li>
                  <li>内存卡</li>
                  <li>充电器</li>
                  <li>电源</li>
                  <li>保修</li>
                </ul>
                <ul class="goodList">
                  <li>
                    <div class="list-wrap">
                      <div class="p-img">
                          <img src="./upload/good1.png">
                      </div>
                      <div class="attr">Apple苹果iPhone 6s (A1699) </div>
                      <div class="price">
                          <em>¥</em>
                          <i>6088.00</i>
                      </div>
                      <div class="operate">
                          <a>加入购物车</a>
                      </div>
                    </div>
                 </li>
                 <li>
                    <div class="list-wrap">
                      <div class="p-img">
                          <img src="./upload/good1.png">
                      </div>
                      <div class="attr">Apple苹果iPhone 6s (A1699) </div>
                      <div class="price">
                          <em>¥</em>
                          <i>6088.00</i>
                      </div>
                      <div class="operate">
                          <a>加入购物车</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="list-wrap">
                      <div class="p-img">
                          <img src="./upload/good1.png">
                      </div>
                      <div class="attr">Apple苹果iPhone 6s (A1699) </div>
                      <div class="price">
                          <em>¥</em>
                          <i>6088.00</i>
                      </div>
                      <div class="operate">
                          <a>加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="tab-in">推荐品牌</div>
            </div>
          </aside>
          <div class="right">
            <div class="fitting">
              <h4 class="kt">选择搭配</h4>
              <div class="good-fit clearfix">
                <div class="master">
                  <img src="./upload/good1.png">
                  <p>￥5299</p>
                  <i>+</i>
                </div>
                <ul class="suits">
                  <li>
                    <img src="./upload/good2.png" alt="图片加载失败">
                    <p>相关手机</p>
                    <label>
                      <input type="checkbox" value="39">
                      <span>39</span>
                    </label>
                  </li>
                  <li>
                    <img src="./upload/good2.png" alt="图片加载失败">
                    <p>相关手机</p>
                    <label>
                      <input type="checkbox" value="39">
                      <span>59</span>
                    </label>
                  </li>
                  <li>
                    <img src="./upload/good2.png" alt="图片加载失败">
                    <p>相关手机</p>
                    <label>
                      <input type="checkbox" value="39">
                      <span>89</span>
                    </label>
                  </li>
                  <li>
                    <img src="./upload/good2.png" alt="图片加载失败">
                    <p>相关手机</p>
                    <label>
                      <input type="checkbox" value="39">
                      <span>39</span>
                    </label>
                  </li>
                </ul>
                <div class="result">
                  <div class="num">已选购0件商品</div>
                  <div class="price-tit">套餐价</div>
                  <div class="price">¥5299</div>
                  <button class="addshopcar">加入购物车</button>
                </div>
              </div>
            </div>
            <div class="info clearfix">
              <ul class="tab-wraped">
                <li class="active"><a>商品介绍</a></li>
                <li><a>规格与包装</a></li>
                <li><a>售后保障</a></li>
                <li><a>社区</a></li>
                <li><a>买家评价</a></li>
              </ul>
              <div class="tab-content active">
                <ul class="goods-intro">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品毛重：0.51kg</li>
                  <li>商品产地：中国大陆</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                  <li>系统：苹果（IOS）</li>
                  <li>像素：1000-1600万</li>
                  <li>机身内存：64GB</li>
                </ul>
                <div class="intro-detail">
                  <img src="./upload/good1.png">
                  <img src="./upload/good2.png">
                </div>
              </div>
              <div class="tab-content">1111</div>
            </div>
          </div>
        </div>
    </section>



      <!-----------footer部分开始------------->
    <footer class="footer">
        <div class="heart">
          <!-----------footer上半部分开始------------->
          <div class="mod_service">
            <ul>
              <li>
                <h5></h5>
                <p>品类齐全，轻松购物</p>
              </li>
              <li>
                <h5></h5>
                <p>多仓直发，极速配送</p>
              </li>
              <li>
                <h5></h5>
                <p>正品行货，精致服务</p>
              </li>
              <li>
                <h5></h5>
                <p>天天低价，畅选无忧</p>
              </li>
            </ul>
          </div>
          <!-----------footer上半部分结束------------->
          <!-----------footer下半部分开始------------->
          <div class="mod_help">
            <div class="mod_help_nav">
              <h5>购物指南</h5>
              <ul>
                  <li><a href="#">购物流程</a></li>
                  <li><a href="#">会员介绍</a></li>
                  <li><a href="#">生活旅行</a></li>
                  <li><a href="#">常见问题</a></li>
                  <li><a href="#">大家电</a></li>
                  <li><a href="#">联系客服</a></li>
              </ul>
            </div>
            <div class="mod_help_nav">
              <h5>购物指南</h5>
              <ul>
                  <li><a href="#">购物流程</a></li>
                  <li><a href="#">会员介绍</a></li>
                  <li><a href="#">生活旅行</a></li>
                  <li><a href="#">常见问题</a></li>
                  <li><a href="#">大家电</a></li>
                  <li><a href="#">联系客服</a></li>
              </ul>
            </div>
            <div class="mod_help_nav">
              <h5>购物指南</h5>
              <ul>
                  <li><a href="#">购物流程</a></li>
                  <li><a href="#">会员介绍</a></li>
                  <li><a href="#">生活旅行</a></li>
                  <li><a href="#">常见问题</a></li>
                  <li><a href="#">大家电</a></li>
                  <li><a href="#">联系客服</a></li>
              </ul>
            </div>
            <div class="mod_help_nav">
              <h5>购物指南</h5>
              <ul>
                  <li><a href="#">购物流程</a></li>
                  <li><a href="#">会员介绍</a></li>
                  <li><a href="#">生活旅行</a></li>
                  <li><a href="#">常见问题</a></li>
                  <li><a href="#">大家电</a></li>
                  <li><a href="#">联系客服</a></li>
              </ul>
            </div>
            <div class="mod_help_nav">
              <h5>购物指南</h5>
              <ul>
                  <li><a href="#">购物流程</a></li>
                  <li><a href="#">会员介绍</a></li>
                  <li><a href="#">生活旅行</a></li>
                  <li><a href="#">常见问题</a></li>
                  <li><a href="#">大家电</a></li>
                  <li><a href="#">联系客服</a></li>
              </ul>
            </div>
            <div class="mod_help_nav">
              <h5>帮助中心</h5>
              <img src="./images/qq.png" alt="图片加载失败">
            </div>
          </div>
          <!-----------footer下半部分结束------------->
          <!-----------footer友情链接部分开始------------->
          <div class="mod_copyright">
            <div class="links">
              <a href="#">关于我们</a><span class="mod_copyright_split">|</span>
              <a href="#">联系我们</a><span class="mod_copyright_split">|</span>
              <a href="#">联系客服</a><span class="mod_copyright_split">|</span>
              <a href="#">合作招商</a><span class="mod_copyright_split">|</span>
              <a href="#">商家帮助</a><span class="mod_copyright_split">|</span>
              <a href="#">营销中心</a><span class="mod_copyright_split">|</span>
              <a href="#">手机京东</a><span class="mod_copyright_split">|</span>
              <a href="#">友情链接</a><span class="mod_copyright_split">|</span>
              <a href="#">销售联盟</a><span class="mod_copyright_split">|</span>
              <a href="#">京东社区</a><span class="mod_copyright_split">|</span>
              <a href="#">风险监测</a><span class="mod_copyright_split">|</span>
              <a href="#">隐私政策</a><span class="mod_copyright_split">|</span>
              <a href="#">京东公益</a><span class="mod_copyright_split">|</span>
              <a href="#">English Site</a><span class="mod_copyright_split">|</span>
              <a href="#">Media & IR</a>
              </div>
            <div class="copyright">
              京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 互联网药品信息服务资格证编号
              (京)-经营性-2014-0008 | 新出发京零 字第大120007号<br>
              互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文
              [2020]6112-1201号 | 违法和不良信息举报电话：4006561155<br>
              Copyright © 2004 - 2022  京东JD.com 版权所有 | 消费者维权热线：4006067733 | 经营
              证照 | (京)网械平台备字(2018)第00003号 | 营业执照 | 增值电信业务经营许可证
            </div>        
          </div>
          <!-----------footer友情链接部分结束------------->
        </div>
    </footer>
      <!-----------footer部分结束------------->
</body>
</html>